/*
 * @Description: 微缩制品质量检测
 * @Author: Zzt
 * @Date: 2022-11-11 14:52:39
 * @LastEditTime: 2022-11-22 17:08:44
 */
import VisualizationMain from '@/components/DataVisualization/VisualizationMain';
import Nav from '@/components/Nav';
import { Tabs } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import { useQualityInspectionContext } from '../contexts/QualityInspectionContext';
import styles from '../styles/qualityInspection.module.scss';
const { TabPane } = Tabs;
const cx = classNames.bind(styles);

const according = [
  { fondName: '按时间阶段', id: 1 },
  { fondName: '按档案类型', id: 2 },
  { fondName: '按移交单位', id: 3 },
  { fondName: '按检测人', id: 4 }
];
const segmentedList = [
  { label: '检查次数', value: 'checkNum' },
  { label: '检查成功数', value: 'checkSuccessNum' },
  { label: '检查失败数', value: 'checkDefalNum' }
];
const table = [
  { lable: '检测年度', name: 'year' },
  { lable: '检测卷数', name: 'checkPapgNum' },
  { lable: '检测次数', name: 'checkNum' },
  { lable: '检查成功次数', name: 'checkSuccessNum' },
  { lable: '检查失败次数', name: 'checkDefalNum' }
];
const QualityInspectionWarp = () => {
  const { dataList } = useQualityInspectionContext();

  // 选中的按照类型
  const [selectAccordingId, setSelectAccordingId] = useState(1);
  const [options, setOptions] = useState([]);
  const [visibleData, setVisibleData] = useState([]);
  const [condition, setCondition] = useState(<></>);
  const [tableList, setTableList] = useState(table);
  const [xData, setXData] = useState([]);
  const [yData, setYData] = useState([]);
  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleAccordingChange = (val: any) => {
    console.log(val);
    setSelectAccordingId(parseInt(val, 10));
  };

  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };

  const onChangeNav = (value: any) => {
    console.log('value', value);
  };
  useEffect(() => {
    console.log('table', table);
    const removed = table.slice(0);
    if (selectAccordingId === 1) {
      removed.splice(1, 0, { lable: '全宗', name: 'general' });
      setVisibleData(dataList);
      setYData(dataList.map((item: any) => item.year));
      setTableList(removed);
      setOptions([]);
      setCondition(<Nav onChangeNav={onChangeNav} />);
    }
    if (selectAccordingId === 2) {
      removed.splice(1, 0, { lable: '检测人', name: 'testedBy' });
      console.log(table);
      setVisibleData(dataList);
      setYData(dataList.map((item: any) => item.company));
      setTableList(removed);
      setOptions([]);
      setCondition(<Nav onChangeNav={onChangeNav} />);
    }
    if (selectAccordingId === 3) {
      removed.splice(1, 0, { lable: '检测人', name: 'testedBy' });
      setVisibleData(dataList);
      setYData(dataList.map((item: any) => item.filledBy));
      setTableList(removed);
      setOptions([]);
      setCondition(
        <>
          <Nav onChangeNav={onChangeNav} />
        </>
      );
    }
    if (selectAccordingId === 4) {
      removed.splice(1, 0, { lable: '检测人', name: 'testedBy' });
      setVisibleData(dataList);
      setYData(dataList.map((item: any) => item.filledBy));
      setTableList(removed);
      setOptions([
        {
          title: '检测人',
          name: 'testedBy',
          checkList: [
            { value: 1, label: '检测人1' },
            { value: 2, label: '检测人2' },
            { value: 3, label: '检测人3' },
            { value: 4, label: '检测人4' },
            { value: 5, label: '检测人5' }
          ]
        }
      ]);
      setCondition(<Nav onChangeNav={onChangeNav} />);
    }
  }, [selectAccordingId]);
  /* 改变年触发 */
  const onChangeYear = (value: any) => {
    setXData(dataList.map((item: any) => item[value.segmentValue]));
  };
  return (
    <>
      <Tabs tabPosition="left" className={cx('tab')} onTabClick={handleAccordingChange}>
        {according.map((item) => (
          <TabPane tab={<>{item.fondName}</>} key={item.id}>
            <VisualizationMain
              type={item.fondName}
              condition={condition}
              segmented={segmentedList}
              tableList={tableList}
              choiceList={options}
              data={{ visibleData, xData, yData }}
              onChange={onChangeYear}
            />
          </TabPane>
        ))}
      </Tabs>
    </>
  );
};
export default QualityInspectionWarp;
